<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google 地图 API 示例: 地址解析 / 反向地址解析</title>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAPTwhF4vlVXrO7ZGOjA9sOxTqQ5WtUwE0C8FR1hRk-yj3qFOmhhR6esbxCerNyfzApAoTJGfOHzcKCQ&sensor=false" type="text/javascript"></script>
    <script type="text/javascript">

    var map;
    var geocoder;
    
    function $(id){
      return document.getElementById(id);
    }

    function initialize() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(39.95, 116.4), 10);
      geocoder = new GClientGeocoder();
    }

    function addAddressToMap(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("不能解析这个地址");
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(getGeocodeHtml(response));
      }
    }

    function getGeocodeHtml(response){
      var html = "<div style='font-size:13px'>";
      html += "<b>搜索目标：</b>" + response.name;
      html += "<br/><b>结果状态：</b>" + response.Status.code;
      if (response.Placemark){
        for (var i = 0, place; place = response.Placemark[i]; i++) {
          html += "<br/><b>地址：</b>" + place.address;
          if(place.AddressDetails.Country)html += "<br/><b>国家代码：</b>" +place.AddressDetails.Country.CountryNameCode;
          html += "<br/><b>准确度：</b>" + place.AddressDetails.Accuracy;
          html += "<br/><b>坐标：</b>" + place.Point.coordinates[1] + place.Point.coordinates[0];
        }
      }
      html += "</div>";
      return html;
    }

    function showLocation() {
      var address = $("q").value;
      geocoder.getLocations(address, addAddressToMap);
    }

    function updateURL(){
      $("url").value = "http://ditu.google.cn/maps/geo?q="+$("q").value+"&output=json&sensor=false&key=abcdefg";
    }

    function findLocation(address) {
      $("q").value = address;
      showLocation();
      updateURL();
    }
    </script>
  </head>

  <body onload="initialize()">
    <p>
      <b>目标地址/坐标：</b>
      <input type="text" id="q" value="" class="address_input" size="50"  onkeyup="updateURL();"/>
      <input type="button" value="搜索" onclick="showLocation();"/>
      <br/><b>等效URL：</b>
      <input type="text" id="url" value="" class="address_input" size="100" />
      <p>
        <b>预设目标:</b><br/>
        <a href="javascript:void(0)"
          onclick="findLocation('北京');return false;">北京</a><br/>
        <a href="javascript:void(0)"
          onclick="findLocation('北京市海淀区');return false;">北京市海淀区</a><br/>
        <a href="javascript:void(0)"
          onclick="findLocation('北京市海淀区清华科技园');return false;">北京市海淀区清华科技园</a><br/>
        <a href="javascript:void(0)"
          onclick="findLocation('39.95,116.4');return false;">39.95,116.4</a><br/>     
        <a href="javascript:void(0)"
          onclick="findLocation('30.95,116.4');return false;">30.95,116.4</a><br/>
      </p>
    </p>
    <div id="map_canvas" style="width: 700px; height: 400px"></div>   
  </body>
</html>
